<template>
  <el-form :model="model" width='250' :rules="rulesForm" ref="dataForm">
                <el-form-item label="请选择父节点" label-width="110px" prop="parent_type_id" class="box-Input-mini">
                    <el-input  :value="model.name"  placeholder="请选择父节点" @focus="SelectDem" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备类型名称" label-width="110px"  prop="machinery_type_name">
                    <el-input v-model="model.machinery_type_name" placeholder="请输入设备类型名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" label-width="110px"  prop="enable_flag">
                    <el-radio v-model="model.enable_flag" label="0">是</el-radio>
                    <el-radio v-model="model.enable_flag" label="1">否</el-radio>
                </el-form-item>
                <el-form-item label="备注" prop="remark" label-width="110px" style="margin:15px 0px 15px 0px;">
                    <el-input v-model="model.remark" placeholder="请输入备注" autocomplete="off"></el-input>
                </el-form-item>

                <div style="text-align:right;">
                    <el-button @click="closeDialog" style="margin-right:10px;">取 消</el-button>
                    <el-button slot="reference" type="primary" @click="save">保 存</el-button>
                </div>
                
                <el-dialog class="box-dialog" width="45%"  :title="title" :visible.sync="dialogFormVisible" @close="closelog" :close-on-click-modal="false" append-to-body>
                    <Select @SelectChange="SelectChange"/>
                </el-dialog>
            </el-form>
            
</template>

<script>

import Select from './SelectType.vue';
export default {
    components:{
        Select
    },
    props:{
          model:{
              type:Object, //类型
              required:true, //必要性
          },
          isUpdate:Boolean
      },
    data(){
        return{
            rulesForm:{
                 machinery_type_name: [{ required: true, message: '请输入设备类型名称', trigger: 'change' }],
                 enable_flag: [{ required: true, message: '是否启用', trigger: 'blur' }],
            },
            title:'请选择父节点',
            dialogFormVisible:false
        }
    },
    methods:{
        save(){
            this.$refs.dataForm.validate((valid)=>{
                if (valid) {
                    if(this.isUpdate)
                    {
                        console.log(111);
                        this.$http.putForm('/api/DeviceType',{model:this.model})
                        .then(res =>{
                            console.log(res);
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.$emit('dataBind');
                                this.closeDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器异常','error');
                        })
                    }
                    else{
                        console.log(222);
                        this.$http.postForm('/api/DeviceType',{model:this.model})
                        .then(res=>{
                        console.log(res);
                        if(res.data.code==200){
                            this.ShowMsg(res.data.msg,'success');
                            this.$emit('dataBind')
                            this.closeDialog();
                        }
                        else{

                        }})
                        .catch(err=>{

                        })
                    
                    }
                } else {
                        console.log('error submit!!');
                        return false;
                    }
            })

           
        },
        SelectChange(e){
            console.log(e)
           this.model.parent_type_id=e.machinery_type_id;
           this.model.name= e.machinery_type_name;
           this.model.machinery_type_id=e.machinery_type_id;
           console.log(this.model);
           this.dialogFormVisible=false;
        },
        SelectDem(){
            this.dialogFormVisible=true;
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        closeDialog(){
          this.$emit('closeDialog')
        },
        closelog(){
            this.dialogFormVisible=false;
        }
    }
}

</script>

<style>

</style>